<template>
    <div :style="carStyle" class="tableClass2">
        <div v-if="!showContent" class="defaultText">请在右侧配置数据</div>
        <template v-else>
            <div style="padding:10px ;">
                <el-form ref="searchform" :inline="true" :model="filterForm" :rules="rules" label-width="0" :size="obj.size"
                    class="filterform" v-if="obj.isSearch">
                    <el-form-item prop="beginTime">
                        <el-input v-model="filterForm.mainText" placeholder="请输入搜索内容" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="findSearchHandle()">搜索</el-button>
                    </el-form-item>
                </el-form>
                <template v-if="obj.isAdd">
                    <el-button style="display:inline-block;" type="primary" :size="obj.size" icon="el-icon-plus"
                        @click="handleCreateData">新增</el-button>
                </template>
                <template v-if="obj.isExport">
                    <el-button style="display:inline-block;" type="primary" :size="obj.size" icon="el-icon-download"
                        @click="exportTableData">导出</el-button>
                </template>
            </div>
            <el-table style="width: 100%" :data="tableResult.dataList">
                <el-table-column v-for="(data, index) in tableResult.columns" :label="data.name" :key="data.id">
                    <template slot-scope="{ row }">
                        <span v-if="data.attributeType == 8" class="filetext" @click.stop="showFile(row.datas[index])">
                            {{
                                jsonDataReturn(row.datas[index])
                            }}
                        </span>
                        <span v-else-if="data.attributeType == 9" class="filetext" @click.stop="showFile(row.datas[index])">
                            {{
                                jsonDataReturn(row.datas[index])
                            }}
                        </span>
                        <span v-else-if="data.attributeType == 10" class="filetext"
                            @click.stop="showFile(row.datas[index])">
                            {{
                                jsonDataReturn(row.datas[index])
                            }}
                        </span>
                        <span v-else>{{ row.datas[index] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" v-if="obj.isEdit">
                    <template slot-scope="{ row }">
                        <div class="opicons">
                            <i class="iconfont icon-bianji1" @click="handleEditNode(row)"></i>
                            <i class="iconfont icon-shanchu1" @click="handleDeletediction(row)"></i>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-if="!obj.tableData.isHidePage" :current-page.sync="filterForm.pageInfo.page" :page-size="filterForm.pageInfo.pageSize"
                layout="total, prev,pager, next" :total="filterForm.pageInfo.totalCount" class="tablepages"
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
        </template>

        <!-- 新增或修改 -->
        <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogcreateFormVisible"
            width="1000px" class="tempdialog" append-to-body>
            <el-form>
                <el-row :gutter="40">
                    <el-col :span="12" class="lefttempview">
                        <template v-for="(item, index) in nodeListArray">
                            <el-row class="templateitem" :key="item.id" v-if="item.type == 0 && item.isDeleted == 0">
                                <el-col :span="6">
                                    <div class="attriname">{{ item.name }}</div>
                                </el-col>
                                <el-col :span="2">
                                    <div class="attrfh">:</div>
                                </el-col>
                                <el-col :span="16">
                                    <div v-if="item.attributeType == 0">
                                        <el-input v-model="item.value" />
                                    </div>
                                    <!-- 数字 -->
                                    <div v-if="item.attributeType == 12">
                                        <el-input v-model="item.value" type="number" />
                                    </div>
                                    <!-- 年月日 -->
                                    <div v-if="item.attributeType == 1">
                                        <el-date-picker v-model="item.value" type="date" value-format="yyyy/MM/dd"
                                            style="width:100%;" placeholder="选择日期" />
                                    </div>
                                    <!-- 时间范围 -->
                                    <div v-if="item.attributeType == 3">
                                        <el-date-picker :value="strToArray2(item.value)"
                                            @input="datePickerChange($event, item)" value-format="yyyy/MM/dd"
                                            type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                                            style="width:100%;" />
                                    </div>
                                    <!-- 要素 -->
                                    <div v-if="item.attributeType == 5">
                                        <element-select v-model="nodeListArray[index]" :isReload="dialogcreateFormVisible"
                                            :multiple="true" />
                                    </div>
                                    <!-- 单选 -->
                                    <div v-if="item.attributeType == 13" class="radiocheckview">
                                        <el-radio v-model="item.value"
                                            v-for="(val, index) in strToArray(item.configuration)" :label="val"
                                            :key="index">{{ val }}</el-radio>
                                    </div>
                                    <!-- 多选 -->
                                    <div v-if="item.attributeType == 6" class="radiocheckview">
                                        <el-checkbox-group :value="strToArray(item.value)"
                                            @input="cheeckBoxToStr($event, item)">
                                            <el-checkbox v-for="val in strToArray(item.configuration)" :label="val"
                                                :key="val">{{ val }}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                    <!-- 数字范围 -->
                                    <div v-if="item.attributeType == 7">
                                        <el-row :gutter="10">
                                            <el-col :span="12">
                                                <el-input placeholder="最小值" v-model="item.value"></el-input>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-input placeholder="最大值" v-model="item.valueTwo"></el-input>
                                            </el-col>
                                        </el-row>
                                    </div>
                                    <!-- 图片 -->
                                    <div v-if="item.attributeType == 8">
                                        <el-upload class="upload-demo" :action="uploadUrl" :multiple="false"
                                            list-type="picture-card"
                                            :on-success="(res, file) => { handleUploadImg(res, file, item) }"
                                            :show-file-list="false" accept=".jpg, .png, .gif">
                                            <div v-if="item.value">
                                                <img :src="showImgInfo(item.value)" class="avatar" width="100%">
                                            </div>
                                            <!-- <el-button size="small" type="primary">点击上传</el-button> -->
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>
                                    </div>
                                    <!-- 视频 -->
                                    <div v-if="item.attributeType == 9">
                                        <el-upload class="upload-demo" :action="uploadUrl"
                                            :on-success="(res, file) => { handleUploadVideo(res, file, item) }"
                                            :multiple="false" :show-file-list="false" accept=".mp4">
                                            <el-button size="small" type="primary">点击上传</el-button>
                                            <p class="videoinfo" v-if="item.value" v-html="showVideoValue(item.value)"
                                                @click.stop="showFile(item.value)"></p>
                                        </el-upload>
                                    </div>
                                    <!-- PDF -->
                                    <div v-if="item.attributeType == 10">
                                        <el-upload class="upload-demo" :action="uploadUrl"
                                            :on-success="(res, file) => { handleUploadPdf(res, file, item) }"
                                            :multiple="false" :show-file-list="false" accept=".pdf">
                                            <el-button size="small" type="primary">点击上传</el-button>
                                            <p class="videoinfo" v-if="item.value" v-html="showVideoValue(item.value)"
                                                @click.stop="showFile(item.value)"></p>
                                        </el-upload>
                                    </div>
                                    <!-- 表格 -->
                                    <div v-if="item.attributeType == 11">
                                        <el-input v-model.number="item.value" disabled />
                                    </div>
                                    <!-- 流程 -->
                                    <div v-if="item.attributeType == 14">
                                        <el-select v-model="item.value" style="width:100%;" @change="setFlowValue(item)">
                                            <el-option v-for="flow in flowList" :key="flow.id" :label="flow.name"
                                                :value="flow.name" />
                                        </el-select>
                                    </div>
                                </el-col>
                            </el-row>
                        </template>
                    </el-col>
                    <el-col :span="12">
                        <template v-for="(item, index) in nodeListArray">
                            <el-row class="templateitem" :key="item.id" v-if="item.type == 1 && item.isDeleted == 0">
                                <el-col :span="6">
                                    <div class="attriname">{{ item.name }}</div>
                                </el-col>
                                <el-col :span="2">
                                    <div class="attrfh">:</div>
                                </el-col>
                                <el-col :span="16">
                                    <!-- <el-select v-model="item.value" @change="nodeEleSltChange($event, item)" placeholder="请选择要素"
                    filterable class="attrtypesld" @focus="remoteMethod(item)">
                    <el-option v-for="option in item.dictionlist" :key="option.id" :label="option.value"
                      :value="option.id + '-' + option.value" />
                  </el-select> -->
                                    <element-select v-model="nodeListArray[index]" :isReload="dialogcreateFormVisible"
                                        :multiple="true" />
                                </el-col>
                            </el-row>
                        </template>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogcreateFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addDictionHandle()">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// import {
//     QueryTable, GetDetail, ElementRecordDelete, GetElementRecordDetail,
//     ElementRecordUpdate, ElementRecordCreate
// } from '@/api/element'
// import ElementSelect from "@/components/ElementSelect"

export default {
    name: "Element", //要素管理
    props: {
        obj: Object,
        isReload: {
            type: Boolean,
            default: false
        },
        isEdit: {
            type: Boolean,
            default: false,
        },
        showfile: Function,
        gotoUrl: Function,
    },
    components: {
        ElementSelect
    },
    data() {
        return {
            showContent: false,
            carStyle: {},
            titleStyle: {},
            currentPage1: 0,
            // 用于比对数据是否修改
            dataStr: "",
            // 获取图标数据
            filterForm: {
                pageInfo: {
                    pageSize: 10,
                    page: 1,
                    totalCount: 0
                },
                elementId: undefined,
                mainText: "",
            },
            timer: null,
            // 表格数据
            // columns: [],
            // dataList: [],
            // tableStyle: {},
            tableResult: {},
            // 新增或修改
            uploadUrl: process.env.VUE_APP_UPLOAD_NEWAPI,
            uploadUrl2: process.env.VUE_APP_UPLOAD_API,
            dialogcreateFormVisible: false,
            textMap: {
                update: "修改",
                create: "新增",
            },
            dialogStatus: "",
            nodeListArray: [],
            editNodeInfo: {},
            nodeInfo: {},
        }
    },
    mounted() {
        this.setStyle();

        this.$nextTick(function () {
            this.reloadInfo();
        })

        this.dataStr = JSON.stringify(this.obj.tableData);
    },
    computed: {
        isGotoView() {
            if (this.isEdit == false && this.obj.contactType > 0) {
                if (this.obj.contactType == 1 && this.obj.boardId) {
                    return true;
                }
                if (this.obj.contactType == 2 && this.obj.url) {
                    return true;
                }
            }
            return false;
        }
    },
    methods: {
        // 动态设置表格列样式
        dtStyle(index) {
            if (this.obj.tableData.itemIds[index]) {
                var tdInfo = this.obj.tableData.itemIds[index];
                return {
                    color: tdInfo.color2,
                    fontSize: tdInfo.fontSize + "px",
                    fontWeight: tdInfo.fontWeight,
                    fontStyle: tdInfo.fontStyle,
                }
            }
            return {};
        },
        reloadInfo() {
            // clearInterval(this.timer);

            // #region
            // var beginTime = "";
            // var endTime = "";
            // const end = new Date();
            // const start = new Date();

            // if (this.obj.tableData.filterTimeType == 99) {
            //     beginTime = undefined;
            //     endTime = undefined;
            // } else if (this.obj.tableData.filterTimeType > 0) {
            //     start.setTime(start.getTime() - 3600 * 1000 * 24 * this.obj.tableData.filterTimeType);
            //     beginTime = this.parseTime(start, "{y}-{m}-{d}");
            //     endTime = this.parseTime(end);
            // } else if (this.obj.tableData.filterTimeType == 0) {
            //     beginTime = undefined;
            //     endTime = undefined;
            // } else {
            //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
            //     beginTime = this.parseTime(start, "{y}-{m}-{d}");
            //     endTime = this.parseTime(end);
            // }
            // this.filterForm.beginTime = beginTime;
            // this.filterForm.endTime = endTime;
            // #endregion
            this.getTempDetail();

            this.getElementDataList((dataResult) => {
                // 循环刷新
                // this.timedRefresh();
            });
        },
        // 定时刷新
        timedRefresh() {
            var timeSize = 60;
            if (this.obj.tableData.reloadTime) {
                timeSize = this.obj.tableData.reloadTime;
            }

            if (this.isReload) {
                this.timer = setInterval(() => {
                    const end = new Date();
                    this.filterForm.endTime = this.parseTime(end, "{y}-{m}-{d} {h}:{i}:{s}");;

                    this.getElementDataList();
                }, timeSize * 1000);
            }
        },
        handleSizeChange(val) {
            this.filterForm.pageInfo.pageSize = val;
            this.getElementDataList();
        },
        handleCurrentChange(val) {
            this.filterForm.pageInfo.page = val;
            this.getElementDataList();
        },
        setStyle() {
            var style = this.obj.style;

            var backgroundColor = "";
            var backgroundImage = "";

            // var tableLayout = "";
            // if (this.obj.tableLayout) {
            //     tableLayout = this.obj.tableLayout;
            // }

            // 背景颜色
            if (style.backgroundImage.length) {
                backgroundImage = `url(${style.backgroundImage}`;
            } else if (style.backgroundColor.length > 0) {
                backgroundColor = style.backgroundColor;
            }

            var boxShadow = "";
            if (style.boxShadow) {
                boxShadow = `${style.boxShadow.h}px ${style.boxShadow.v}px ${style.boxShadow.blur}px ${style.boxShadow.spreed}px ${style.boxShadow.color}`
            }

            this.carStyle = {
                boxShadow,
                width: "100%",
                height: "100%",
                // display: "flex",
                backgroundSize: "100% 100%",
                borderStyle: "solid",
                backgroundImage,
                backgroundColor,
                color: style.color,
                fontSize: style.fontSize + "px",
                justifyContent: style.justifyContent,
                alignItems: style.alignItems,
                borderColor: style.borderColor,
                borderWidth: style.borderWidth + "px",
                borderRadius: style.borderRadius + "px",
                fontWeight: style.fontWeight,
                fontStyle: style.fontStyle,
            }

            // this.tableStyle = {
            //     tableLayout
            // }
            // #region 新的背景颜色

            if (this.obj.style.bgcolorType == "image") {
                this.carStyle.backgroundImage = backgroundImage;
            } else if (this.obj.style.bgcolorType == "gradient") {
                if (this.obj.style.gradient.isRadial) {
                    this.carStyle.backgroundImage = `radial-gradient(${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                } else {
                    this.carStyle.backgroundImage = `linear-gradient(${this.obj.style.gradient.fontAngle}deg, ${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                }
            } else {
                this.carStyle.backgroundColor = backgroundColor;
            }

            // #endregion

            this.titleStyle = {
                justifyContent: style.justifyContent,
                // alignItems: style.alignItems,
            }
        },
        // 搜索
        findSearchHandle() {
            this.filterForm.pageInfo.page = 1;
            this.getElementDataList();
        },
        getElementDataList(callback) {
            // console.log(this.obj)
            if (this.obj.tableData.pageSize) {
                this.filterForm.pageInfo.pageSize = this.obj.tableData.pageSize;
            }

            if (this.obj.tableData.tableId) {
                this.showContent = true;
                this.filterForm.elementId = this.obj.tableData.tableId;
                // var idlist = [];
                // this.obj.tableData.itemIds.forEach(e => {
                //     if (e.id) {
                //         idlist.push(e.id);
                //     }
                // });
                // this.filterForm.structureIds = idlist;
                // 查询要素数据列表
                // this.$loading();
                QueryTable(this.filterForm).then(res => {
                    this.tableResult = res.data.data.dataResult;
                    // this.columns = [];
                    // this.dataList = [];
                    // let columns = res.data.data.dataResult.columns;
                    // if (res.data.data.dataResult && res.data.data.dataResult.dataList && res.data.data.dataResult.dataList.length) {

                    //     let dataList = res.data.data.dataResult.dataList;

                    //     // 过滤数据列
                    //     let ids = [];
                    //     this.obj.tableData.itemIds.forEach(e => {
                    //         ids.push(e.id)
                    //     })

                    //     let itemArr = [];
                    //     columns.forEach((x, k) => {
                    //         if (ids.indexOf(x.id) != -1) {
                    //             itemArr.push(x);
                    //         }
                    //     })

                    //     var dataArray = [];
                    //     dataList.forEach((e, i) => {
                    //         var itemArr = { id: e.id, datas: [] };
                    //         // console.log(e);
                    //         columns.forEach((x, k) => {
                    //             if (ids.indexOf(x.id) != -1) {
                    //                 itemArr.datas.push(e.datas[k]);
                    //             }
                    //         })
                    //         dataArray.push(itemArr);
                    //     })

                    //     // console.log(dataArray);
                    //     this.dataList = dataArray;
                    //     this.columns = itemArr;
                    // }

                    this.filterForm.pageInfo.totalCount = res.data.data.pageInfo.totalCount;
                })
            }
        },
        // 日期筛选触发查询函数
        dateSearch(beginTime, endTime) {
            clearInterval(this.timer);
            var self = this;
            this.filterForm.beginTime = beginTime;
            this.filterForm.endTime = endTime;

            this.getElementDataList();
        },

        // #region 上传相关
        handleUploadImg(res, file, item) {
            if (res.code == 0) {
                // console.log(res);
                // console.log(item);
                item.value = JSON.stringify({
                    url: res.data,
                    name: file.name,
                    type: 0
                })
            } else {
                this.$message.error("上传失败")
            }
        },
        handleUploadVideo(res, file, item) {
            if (res.code == 0) {
                item.value = JSON.stringify({
                    url: res.data,
                    name: file.name,
                    type: 1
                })
            } else {
                this.$message.error("上传失败")
            }
        },
        handleUploadPdf(res, file, item) {
            if (res.code == 0) {
                item.value = JSON.stringify({
                    url: res.data,
                    name: file.name,
                    type: 2
                })
            } else {
                this.$message.error("上传失败")
            }
        },
        showImgInfo(data) {
            var info = JSON.parse(data);
            return info.url;
        },
        showVideoValue(data) {
            var info = JSON.parse(data);
            return `<a>${info.name}</a>`
        },
        // 资源文件展示
        jsonDataReturn(jsonData) {
            if (jsonData) {
                var data = JSON.parse(jsonData);
                return data.name;
            }
            return "";
        },
        showFile(jsonData) {
            if (jsonData) {
                var data = JSON.parse(jsonData);
                // return data.name;
                this.goDetial(data);
            }
            return false;
        },
        goDetial(item) {
            if (this.isEdit) {
                this.$message.error("预览时查看详情");
                return false;
            }
            if (item.type == 0) {
                this.$emit('showfile', { type: 0, url: item.url })
            } else if (item.type == 1) {
                this.$emit('showfile', { type: 1, url: item.url })
            } else if (item.type == 2) {
                window.open(item.url);
            }
        },
        // #endregion
        // 要素模板相关
        // 内容填写数据操作与填充
        strToArray(value) {
            if (value && value.length) {
                return value.split(",");
            }
            return [];
        },
        strToArray2(value) {
            if (value && value.length) {
                return value.split("-");
            }
            return [];
        },
        cheeckBoxToStr(event, item) {
            item.value = event.join();
        },
        datePickerChange(e, item) {
            console.log(e)
            item.value = e.join("-");
        },

        // #region 添加删除数据
        getTempDetail() {
            if (this.obj.tableData.tableId) {
                GetDetail({ id: this.obj.tableData.tableId }).then(res => {
                    if (res.data.code == 0) {

                        this.nodeInfo = res.data.data;
                        this.nodeListArray = res.data.data.nodeList;

                        this.textMap.create = `新增${this.nodeInfo.name}`;
                        this.textMap.update = `修改${this.nodeInfo.name}`;

                        // this.getElementDataList();
                    }
                })
            }
        },
        handleCreateData() {
            this.dialogStatus = "create";
            GetDetail({ id: this.obj.tableData.tableId }).then(res => {
                if (res.data.code == 0) {
                    this.dialogcreateFormVisible = true;

                    // this.nodeInfo = res.data.data;
                    var arr = res.data.data.nodeList;
                    arr.forEach(e => {
                        e.value = "";
                        e.valueTwo = "";
                        e.longValue = "";
                        e.dictionlist = [];
                    })
                    this.nodeListArray = arr;
                }
            })
        },
        addDictionHandle() {
            this.$loading();

            if (this.dialogStatus == "update") {
                this.editNodeInfo.nodeRecords = this.nodeListArray;
                ElementRecordUpdate(this.editNodeInfo).then(res => {
                    this.$loading().close();
                    if (res.data.code == 0) {
                        this.dialogcreateFormVisible = false;
                        this.$message.success("修改成功");
                        this.getElementDataList();
                    } else {
                        this.$message.error(res.data.message);
                    }
                }).catch(() => {
                    this.$loading().close();
                });
            } else {
                this.nodeInfo.nodeRecords = this.nodeListArray;
                ElementRecordCreate(this.nodeInfo).then(res => {
                    this.$loading().close();
                    if (res.data.code == 0) {
                        this.dialogcreateFormVisible = false;
                        this.$message.success("添加成功");
                        this.getElementDataList();
                    } else {
                        this.$message.error(res.data.message);
                    }
                }).catch(() => {
                    this.$loading().close();
                });
            }
        },
        handleDeletediction(item) {
            this.$confirm(
                "确定要删除选中的要素信息吗？",
                "删除",
                {
                    confirmButtonText: "确认",
                    cancelButtonText: "取消",
                    type: "error",
                }
            ).then(() => {
                this.$loading();
                ElementRecordDelete({ id: item.id })
                    .then(() => {
                        this.getElementDataList();
                        this.$message({
                            message: "删除成功",
                            type: "success",
                        });
                        this.$loading().close();
                    })
                    .catch(() => {
                        this.$loading().close();
                    });
            });
        },
        handleEditNode(item) {
            this.$loading();
            this.dialogStatus = "update";
            GetElementRecordDetail({ id: item.id }).then(res => {
                this.$loading().close();
                if (res.data.code == 0) {
                    this.dialogcreateFormVisible = true;

                    var arr = res.data.data.nodeRecords;
                    arr.forEach(e => {
                        e.dictionlist = [];
                    })
                    // this.$set(this.data, 'nodeListArray', arr);
                    // console.log(this.nodeListArray);
                    this.nodeListArray = arr;
                    this.editNodeInfo = res.data.data;
                } else {
                    this.$loading.error(res.data.message);
                }
            }).catch(() => {
                this.$loading().close();
            });
        },
        // #endregion

        // #region 数据导出
        exportTableData() {
            if (this.obj.tableData.tableId) {
                const loading = this.$loading({
                    lock: true,
                    text: '数据正在导出……',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });

                var queryData = Object.assign({}, this.filterForm);
                queryData.pageInfo.pageSize = 9999;
                queryData.pageInfo.page = 1;

                QueryTable(queryData).then(res => {
                    if (res.data.code == 0) {
                        if (res.data.data.dataResult) {
                            var itemdata = res.data.data.dataResult.columns;
                            var listdata = res.data.data.dataResult.dataList;
                            listdata = listdata.map(e => {
                                return e.datas;
                            });
                            // console.log(listdata);
                            this.exportDowlad(itemdata, listdata);
                        }
                    } else {
                        this.$message.error(res.data.Message);
                    }
                }).catch(() => {
                    loading.close();
                });
            }
        },
        exportDowlad(columns, datalist) {
            var self = this;
            import("@/vendor/Export2Excel").then((excel) => {
                const tHeader = columns.map(e => { return e.name; });

                excel.export_json_to_excel({
                    header: tHeader,
                    data: datalist,
                    filename: "要素导出数据-" + this.nodeInfo.name,
                    autoWidth: true,
                    bookType: "xlsx",
                });
                this.exportFormVisible = false;
                self.$loading().close();
            });
        },
        // #endregion
    },
    watch: {
        obj: {
            deep: true,  // 深度监听
            handler(newVal, oldVal) {
                this.setStyle();

                // 数据改变了 动态更新echart
                if (JSON.stringify(this.obj.tableData) != this.dataStr) {
                    this.dataStr = JSON.stringify(this.obj.tableData);

                    if (this.obj.tableData.tableId) {
                        this.reloadInfo();
                    }
                }
            }
        }
    },
    // beforeDestroy() {
    //     clearInterval(this.timer)
    // }
}
</script>

<style lang="scss">
.tableClass2 {
    overflow-y: auto;

    .el-table,
    .el-table th,
    .el-table tr,
    .el-pager li,
    .el-pagination .btn-next,
    .el-pagination button:disabled {
        background: none !important;
    }

    .opicons i {
        margin: 0px;
        margin-right: 12px;
    }

    .el-form-item {
        margin-bottom: 0;
    }

    .filterform {
        display: inline;
    }
}

.tempdialog .el-dialog__body {
    max-height: 500px;
    overflow-y: auto;
}

.bdchildinfo {
    margin-top: 10px;
}

.radiocheckview {
    padding: 10px 0;
}

.attriname {
    text-align: right;
    width: 100%;
    padding-right: 5px;
    line-height: 40px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lefttempview {
    border-right: solid 1px #adadad;
    min-height: 450px;
}

.attrfh {
    text-align: center;

    line-height: 40px;
}

.templateitem {
    margin-bottom: 15px;
}

.upload-demo .videoinfo {
    padding-top: 10px;
    text-decoration: underline;
}
.tablepages {
    width: 100%;
    display: flex;
    margin-top: 5px;
    justify-content: flex-end;
    overflow: auto;
}
</style>